<template>
  <div class="user_styl">
    <div class="user_base">
      <div class="title_styl">
        <div class="title_left">
          <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
          <div class="title_name">基本信息</div>
        </div>
      </div>
      <div class="user_info">
        <img class="img_styl" src="@/assets/images/goods_module1.png" alt="" srcset="" />
        <div class="info_first">
          <div class="user_name">
            <div class="info_left">
              <div class="name_styl">
                {{ store_userInfo.userName }}
                <Icons font="#icon-jb-bj" class="icon-jb-bj" fontSize="16px"></Icons>
              </div>
              <img class="img_styl1" src="@/assets/images/myXing.png" alt="" />
            </div>
            <div class="edit_styl" @click="editUserInfo">
              <Icons font="#icon-bj2" class="icon-bj2" fontSize="16px"></Icons>
              编辑
            </div>
          </div>
          <div class="status_styl">
            <div class="status_title">账号状态：</div>
            <div class="status_content">
              {{ statusName[store_userInfo.examineStatus] }}
            </div>
          </div>
          <div class="examine_styl" v-if="store_userInfo.examineStatus == 3 || store_userInfo.examineStatus == 5">
            <div class="examine_title">
              审核意见：
            </div>
            <div v-if="store_userInfo.examineStatus == 3">
              <Ellipsis :text="store_userInfo.firstExamineMemo" :length="100" tooltip />
            </div>
            <div v-if="store_userInfo.examineStatus == 5">
              <Ellipsis :text="store_userInfo.reexamineMemo" :length="100" tooltip />
            </div>
          </div>
        </div>
      </div>
      <div class="phone_styl">
        <div class="phone_item">
          <Icons font="#icon-sj1" class="icon-sj1" fontSize="16px"></Icons>
          <div class="phone_num">手机号：{{ store_userInfo.phone }}</div>
        </div>
        <Lines class="line_styl" backColor="#D8D8D8" widthNum="1px" heightNum="18px"></Lines>
        <div class="phone_item">
          <div class="company_styl">企业名称：{{ store_userInfo.docCustomerCredential.entName }}</div>
        </div>
        <Lines class="line_styl" backColor="#D8D8D8" widthNum="1px" heightNum="18px"></Lines>
        <div class="phone_item">
          <div class="company_styl">注册时间：{{ store_userInfo.createTime }}</div>
        </div>
      </div>
    </div>
    <div class="certificate_styl">
      <div class="title_styl">
        <div class="title_left">
          <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
          <div class="title_name">基本信息</div>
        </div>
      </div>
      <div class="company_info">
        <div class="company_left">
          <div class="company_title">企业名称</div>
          <div class="company_name">{{ store_userInfo.docCustomerCredential.entName }}</div>
          <div class="company_time">
            成立时间: {{ store_userInfo.docCustomerCredential.registerTime }}
          </div>
        </div>
        <div class="person_phone">
          <Icons font="#icon-sj1" class="icon-sj1" fontSize="16px"></Icons>
          <div class="phone_num">
            联系人电话：{{ store_userInfo.docCustomerCredential.linkPersonTel }}
          </div>
        </div>
      </div>
      <div class="user_content">
        <Form ref="form" :model="store_userInfo.docCustomerCredential" label-position="left" :label-width="110"
          style="width:100%">
          <Row>
            <Col span="8">
            <FormItem label="客户性质">
              <div class="form_content">{{ typeName[store_userInfo.docCustomerCredential.type] }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="客户类型">
              <div class="form_content">{{ memberTypeName[store_userInfo.docCustomerCredential.memberType] }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="付款方式">
              <div class="form_content">{{ payModes[store_userInfo.docCustomerCredential.payMode] }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="企业名称">
              <div class="form_content">
                <Ellipsis :text="store_userInfo.docCustomerCredential.entName" :length="20" tooltip />
              </div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="联系人姓名">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.linkPersonName }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="联系人电话">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.linkPersonTel }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="法人">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.entLegalPerson }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="电话号码">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.phone }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="纳税号">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.entTaxNumber }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="开户银行">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.openBank }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="银行账号">
              <div class="form_content">
                <Ellipsis :text="store_userInfo.docCustomerCredential.bankCard" :length="20" tooltip />
              </div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="银行账户名称">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.openBankName }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="经营范围">
              <div class="form_content">
                <Ellipsis :text="store_userInfo.docCustomerCredential.entBusinessScope" :length="20" tooltip />
              </div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="注册时间">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.registerTime }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="注册资本">
              <div class="form_content"> {{ store_userInfo.docCustomerCredential.registerCapital }}万元</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="实缴资本">
              <div class="form_content"> {{ store_userInfo.docCustomerCredential.realCapital }}万元</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="注册地址">
              <div class="form_content"> {{ store_userInfo.docCustomerCredential.addres }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="是否仓储经营">
              <div class="form_content">{{ storages[store_userInfo.docCustomerCredential.storageStatus] }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="易制毒">
              <div class="form_content"> {{ store_userInfo.docCustomerCredential.storageStatus == 0 ? '是' : '否' }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="危化企业">
              <div class="form_content"> {{ store_userInfo.docCustomerCredential.dangerousStatus == 0 ? '是' : '否' }}</div>
            </FormItem>
            </Col>
            <Col span="8">
            <FormItem label="银行卡是主账号">
              <div class="form_content">{{ store_userInfo.docCustomerCredential.bankCardStatus == 0 ? '是' : '否' }}</div>
            </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>

    <div class="book_styl">
      <div class="book_item">
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">营业执照</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.entImgLicense"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">委托授权书</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.entImgLettattmoey"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">危险化学品许可证</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.entImgDangerous"></QdlookOnly>
          </div>
        </div>
      </div>

      <div class="book_item">
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">易制毒证</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.poisonImg"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">银行开户许可证</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.entImgOpenLicense"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">委托人身份证复印件</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.linkPersonCode"></QdlookOnly>
          </div>
        </div>
      </div>

      <div class="book_item">
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">财务报表</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.financeImg"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">非涉诈告知书</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.unfraudImg"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">法人身份证复印件</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.imgCardJust"></QdlookOnly>
          </div>
        </div>
      </div>

      <div class="book_item">
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">成品油零售经营许可证</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.finishoilRetailImg"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl" v-if="store_userInfo.docCustomerCredential.memberType == 3">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">加油站正面照</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.refuelstandImg"></QdlookOnly>
          </div>
        </div>
        <div class="item_styl">
          <div class="title_styl">
            <div class="title_left">
              <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
              <div class="title_name">其他附件</div>
            </div>
          </div>
          <div class="img_list">
            <QdlookOnly :imageList="store_userInfo.docCustomerCredential.unfraudImg"></QdlookOnly>
          </div>
        </div>
      </div>
    </div>

    <!-- 填写用户详细信息 -->
    <Register2 ref="Register2"></Register2>

  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import Register2 from "@/views/login/Register2";
import QdlookOnly from '../../components/qdPicUpload/Qd-lookOnly'

export default {
  components: { Register2, QdlookOnly },
  data() {
    return {
      statusName: {
        0: "审核通过",
        1: "已保存",
        2: "待审核",
        3: "审核不通过",
        4: "待审核",
        5: "复审不通过"
      },
      typeName: {
        2: "民企非上市",
        3: "央企",
        4: "民企上市",
        5: "地方国企",
      },
      memberTypeName: {
        1: "生产型",
        2: "贸易型",
        3: "终端零售型",
      },
      storages: {
        0: "自有",
        1: "租赁",
        2: "否"
      },
      payModes: {
        "01": "先款后货",
        "02": "先货后款"
      }

    };
  },
  computed: {
    ...mapGetters(["store_userInfo"]),
  },
  mounted() {
    this.get_userInfo();
  },
  methods: {
    ...mapActions(['get_userInfo']),

    changeval(even, param) {
      this.addFather[param] = even;
    },
    editUserInfo() {
      this.$refs.Register2.openFun(this.store_userInfo.docCustomerCredential);
    }
  },
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.user_styl {
  width: 100%;

  .title_styl {
    .flex-x();
    padding-top: 8px;

    .title_left {
      .flex-x(flex-start);

      .title_name {
        margin-left: 17px;
        font-size: 16px;
        font-weight: bold;
      }

      .title_desc {
        margin-left: 20px;
        font-size: 12px;
        color: #999999;
      }
    }
  }

  .user_base {
    width: 100%;
    background-image: url("~@/assets/images/user_back.png");
    background-color: #ffffff;

    .user_info {
      .flex-x(flex-start);
      padding: 18px 42px 16px 12px;
      border-bottom: 1px solid #f7f7f7;

      .img_styl {
        width: 56px;
        height: 56px;
        margin-right: 10px;
        border-radius: 100%;
      }

      .info_first {
        flex-grow: 1;

        .user_name {
          .flex-x();
          width: 100%;
          font-size: 12px;

          .info_left {
            .flex-x(flex-start);

            .name_styl {
              .flex-x(flex-start);
              color: @themeColor;

              .icon-jb-bj {
                margin: 0 8px 0 3px;
              }
            }
          }

          .img_styl1 {
            position: relative;
            width: 100px;
            height: 36px;
            z-index: 100;
            margin-right: -5px;
          }

          .edit_styl {
            .flex-x(flex-start);
            cursor: pointer;
            color: @themeColor;

            .icon-bj2 {
              margin-right: 6px;
            }
          }
        }

        .status_styl {
          .flex-x(flex-start);
          margin-top: 8px;
          font-size: 12px;

          .status_title {
            color: #9e9e9e;
          }

          .status_content {
            color: #25cb73;
          }
        }

        .examine_styl {
          margin-top: 8px;
          font-size: 12px;
          color: red;
          .flex-x(flex-start);

          .examine_title {
            color: #9e9e9e;
          }
        }
      }
    }

    .phone_styl {
      .flex-x(flex-start);
      height: 42px;
      font-size: 12px;

      .phone_item {
        .flex-x(flex-start);
        padding: 0 36px;

        .icon-sj1 {
          margin-right: 4px;
        }

        .phone_num {
          color: #fc5531;
        }
      }

      .company_styl {
        padding: 3px 10px;
        font-size: 12px;
        border-radius: 100px;
        color: #9e9e9e;
        background-color: #f2f2f2;
      }
    }
  }

  .certificate_styl {
    margin-top: 12px;
    background-color: #ffffff;

    .company_info {
      .flex-x();
      padding: 10px 0 15px 0;
      margin: 0 24px;
      font-size: 12px;
      border-bottom: 1px dashed #d8d8d8;

      .company_left {
        .flex-x(flex-start);

        .company_title {
          padding: 0 1px;
          color: @themeColor;
          border: 1px solid @themeColor;
        }

        .company_name {
          margin: 0 10px 0 14px;
          font-size: 14px;
        }

        .company_time {
          color: #928c8c;
        }
      }

      .person_phone {
        .flex-x();
        color: #fc5531;

        .icon-sj1 {
          margin-right: 4px;
        }
      }
    }

    .user_content {
      .flex-x();
      padding: 14px 26px 14px 26px;
      font-size: 12px;

      .form_content {
        text-align: left;
      }

      .user_left {
        width: 33.33%;

        .user_item {
          .flex-x(flex-start);
          margin-bottom: 12px;

          .item_label {
            width: 90px;
            text-align: left;
            color: #928c8c;
          }
        }
      }

      .user_right {
        width: 33.33%;

        .user_item {
          .flex-x(flex-start);
          margin-bottom: 12px;

          .item_label {
            width: 90px;
            text-align: left;
            color: #928c8c;
          }
        }
      }
    }
  }

  .book_styl {
    .book_item {
      .flex-x();
      margin-top: 12px;
      background-color: #ffffff;

      .item_styl {
        width: 33.33%;

        .img_list {
          .flex-x(flex-start);
          padding: 16px 24px;

          .img_styl2 {
            width: 162px;
            height: 162px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}

/deep/.ivu-form-item {
  margin-bottom: 0px;
}
</style>
